<template>
  <el-row>
    <el-col :xs="0" :md="24">
      <el-card class="header-card">
        <el-page-header icon="el-icon-arrow-left" @back="goBack" title="返回">
          <template #content>
            成为咨询师
          </template>
        </el-page-header>
      </el-card>
      <el-card class="box-card">
        <div class="summary-input">
          <el-form>
            <el-form-item>
              <el-input placeholder="请输入内容" v-model="summary" style="width:500px">
                <template #prepend>介绍:</template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-button class="submit-button" @click="apply()" type="primary" plain>点击申请</el-button>
        <el-dialog
            title="提示"
            v-model="dialogVisible"
            width="30%"
            :before-close="confirm">
          <span>您已经是咨询师</span>
          <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
          </template>
        </el-dialog>
      </el-card>
    </el-col>
  </el-row>


  <el-row>
    <el-col :xs="24" :sm="0">
      <el-card class="">
        <el-page-header icon="el-icon-arrow-left" @back="goBack" title="返回">
          <template #content>
            成为咨询师
          </template>
        </el-page-header>
      </el-card>
      <el-card class="">
        <div class="">
          <el-form>
            <el-form-item>
              <el-input placeholder="请输入内容" v-model="summary" style="width: auto">
                <template #prepend>介绍:</template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-button class="submit-button" @click="apply()" type="primary" plain>点击申请</el-button>
        <el-dialog
            title="提示"
            v-model="dialogVisible"
            width="30%"
            :before-close="confirm">
          <span>您已经是咨询师</span>
          <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
          </template>
        </el-dialog>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import router from "@/router";
import {onBeforeMount, reactive, toRefs, ref, getCurrentInstance} from "vue";
import {getUser, removeUser, saveUser} from "@/utils/cookies";
import {ElMessage} from 'element-plus'
import {updateIdentity, getUserByEmail} from "../../api/user";


export default {
  name: "becomeCounselor",
  setup() {

    const data = reactive({
      user: {},
      dialogVisible: false,
      summary: '',
      loginUser: {
        email: '',
        pass: ''
      }
    })

    const goBack = () => {
      router.push('/')
    }

    const confirm = () => {
      data.dialogVisible = false
      goBack()
    }

    const apply = () => {
      if (data.summary === '') {
        ElMessage('请输入描述再申请')
      } else {
        data.user.summary = data.summary;
        data.user.identity = '咨询师';
        updateIdentity(data.user).then(res => {
          if (res.message === 'success') {
            data.loading = false;
            ElMessage('申请成功');
            refreshCookie();
            goBack()
            setTimeout(function () {
              location.reload()
            }, 1500)
          }
        })
      }
    }


    //申请成功后，刷新cookie中的用户信息
    const refreshCookie = () => {
      removeUser();
      getUserByEmail(data.user.email).then(res => {
        saveUser(res.data);
      })
    }

    onBeforeMount(() => {
      data.user = getUser()
      if (data.user.identity === '咨询师') {
        data.dialogVisible = true
      }
    })

    return {
      ...toRefs(data),
      goBack,
      apply,
      confirm,
      refreshCookie
    }
  }
}
</script>

<style lang="less" scoped>
.header-card {
  height: 60px
}

.box-card {
  width: 1360px;
  margin: 30px auto;
  min-height: 600px;
}

.el-button {
  margin-top: 30px;
}

.el-input {
  width: 130px;
}

.summary-input {
  margin-top: 100px;
}

.submit-button {
  margin-top: 50px
}
</style>
